<template>
    <div flex class="content">
        <div class="content-left" style="padding:5px">
            <div>
                <p class="left-title"><span>新增工作日志</span></p>
                <div class="warning">项目日志请认真并及时填写,乱写罚款,所有罚款用于部门活动经费!!!</div>
                <base-form :formRow="taskFormRow" @elDialogClick="elDialogClick" @onSelect="selectChange" ref="taskForm"
                    :spanWidth="'60px'" :spanNumber="24" :isFunBtn="false" style="padding: 0 20px;">
                </base-form>
            </div>
            <div>
                <p class="left-title"><span>新增工作日志</span></p>
                <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 10 }" placeholder="请输入内容"
                    v-model="textarea"></el-input>
            </div>
            <div style="position: absolute;right: 10px;bottom: 10px;">
                <el-button type="danger" size="small" @click="del">删除</el-button>
                <el-button type="danger" size="small" @click="clear">清空</el-button>
                <el-button type="primary" size="small" @click="submitForm">提交</el-button>
            </div>
        </div>
        <base-layout :isPage="true" :showTitle="false" :defaultButtonSwitch="false" ref="layout" @pageChange="onPageChange"
            style="flex:1;width: 75%;">
            <div slot="main" slot-scope="{ tableHeight }" style="height:calc(100% - 30px);">
                <p class="right-title"><span>历史工作日志</span></p>
                <base-table :border="true" :showIndex="false" :slotrow="false" style="overflow-x: auto;"
                    :tableHeight="tableHeight" :tabLoading.sync="tabLoading" :tableData="tableData"
                    :tableColumn="tableColumn" ref="tableData" @doubleClick="doubleClick">
                    <template v-slot:recordDay="{ row }">
                        <span>{{ row.recordDay | getDate }}</span>
                    </template>
                    <template v-slot:createDate="{ row }">
                        <span>{{ row.createDate | getDate }}</span>
                    </template>
                    <template v-slot:updateDate="{ row }">
                        <span>{{ row.updateDate | getDate }}</span>
                    </template>
                    <template v-slot:auditState="{ row }">
                        <span :style="{ 'color': row.auditState == 1 ? '#ff0001' : '#1a95ff' }">{{ row.auditState == 1 ?
                            '未审核' : '已审核' }}</span>
                    </template>
                </base-table>
            </div>
        </base-layout>
    </div>
</template>

<script>
// 组件
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
import baseDialog from '@/components/base/BaseNewDialog'
import baseForm from '@/components/base/baseNewForm'
import baseQuantityPerson from '@/components/base/baseQuantityPerson'
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { myLogList, myLogSave, myLogDel, myLogDetial } from "@/api/apis/myJob";

import { GetDataSourcePerson, } from "@/api/apis/documentManagement";
import configData from './configData';
import { projectList, projectProPhaseDelData } from "@/api/apis/projectManagement";
export default {
    components: {
        baseLayout, baseTable, baseDialog, baseForm, baseQuantityPerson
    },
    data() {
        return {
            //

            pageModel: {//分页
                limit: 20, page: 1
            },
            tableColumn: configData.tableColumn,//表头
            tableData: [],//表数据
            // tableHeight: 'calc(100vh - 40px)',
            tabLoading: false,
            //
            textarea: '',
            taskFormRow: configData.taskFormRow,
            //
            input1: "",
            input2: "",
            value1: "",
            delState: "",//双击状态
            id: '',//双击行数据id

            dropList2: [],//人员下拉
            dropList1: [],//项目下拉
            billid: '',

        };
    },
    mounted() {
        this.init()
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('T')[0]
        },
    },
    methods: {
        // 页面初始化
        init() {
            this.GetBillList();
            this.getProjectList();
        },

        elDialogClick(row) {
            this.$refs.baseQuantityPerson.openDialog()
        },
        selectChange($event, index, indexRow, val) {
            this.$refs.taskForm.getField("projectID", val.projectID)
        },
        //行双击事件
        doubleClick(row) {
            this.delState = true
            this.DetialData(row)
        },
        //提交
        async submitForm() {
            let data = {
                dataMain: {
                    ...this.$refs.taskForm.ruleForm,
                    billid: this.billid ? this.billid : "00000000-0000-0000-0000-000000000000",
                    countent: this.textarea
                }
            }
            let res = await myLogSave(data);
            if (res.code == 1) {
                this.$vmNews("保存成功", "success");
                this.GetBillList()
                this.clear()
            }
        },

        //删除
        del() {
            if (this.delState) {
                this.$delConfirm().then(res => {
                    this.delete()
                })
            } else {
                this.$vmNews('请双击选择右侧列表中一条数据!', 'warning')
            }

        },
        async delete() {
            let res = await myLogDel({ id: this.billid });
            if (res.success == "true") {
                this.$vmNews("删除成功", "success");
                this.GetBillList()
                this.clear()
            }
        },
        async DetialData(row) {
            let res = await myLogDetial({ id: row.billid, op: "" });
            if (res.code == 1) {
                this.$nextTick(() => {
                    this.textarea = row.countent
                    this.$refs.taskForm.choiceAssignment(res.data[0])
                })
                this.billid = res.data[0].billid
            }
        },
        clear() {
            this.$refs.taskForm.resetFields();
            this.textarea = '';
            this.delState = false;
        },
        //任务下发列表
        async GetBillList() {
            this.billid = '';
            this.tabLoading = true;
            let params = {
                ...this.pageModel, Sequence: "", SequenceName: "",
            }
            const res = await myLogList(params);
            if (res.code == 1) {
                this.$refs.layout.setPageTotal(res.data[0]);
                this.tableData = res.data[1];
                this.tabLoading = false;

            }

        },
        //获取下拉项目名称
        async getProjectList() {
            let params = {
                ...this.pageModel,
                Sequence: "",
                SequenceName: "",
            };
            let res = await projectList(params);
            if (res.code == 1) {
                let arrList = [];
                if (res.data[0] > 0) {
                    res.data[1].forEach((el) => {
                        let arr = {
                            label: el.projectName,
                            value: el.billCode,//
                            projectID: el.billid,
                        };
                        arrList.push(arr);
                        // console.log(arrList);
                    });
                }
                this.dropList1 = arrList;
                this.taskFormRow[0].elCol[0].options = arrList;
            }
        },
        // 分页
        onPageChange(model) {
            this.pageModel.page = model.page;
            this.pageModel.limit = model.limit;
            this.GetBillList()
        },

    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    padding: 0 10px;

    .content-left {
        overflow-y: auto;
        position: relative;
        width: 25%;
        padding: 5px;
        border: 1px solid #d5d7d6;
        border-radius: 10px;
        margin: 0px 10px 10px 0;

        ::v-deep .el-form--label-top {
            padding: 0 10px
        }

    }


    .warning {
        background: #FFF7F7;
        border-radius: 6px;
        border: 1px solid #ED2B2B;
        width: 100%;
        font-size: 14px;
        font-family: PingFangSC;
        color: #ED2B2B;
        line-height: 1.5;
        padding: 10px 15px;
        margin-bottom: 10px;
    }
}

.left-title {
    padding: 20px 10px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #000;

    ::v-deep .el-form-item__label {
        font-size: 16px;
    }

    span {
        padding-left: 8px;
        border-left: 3px solid #2261F6;
    }
}

.right-title {
    padding: 0px 10px 20px 10px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #000;

    ::v-deep .el-form-item__label {
        font-size: 16px;
    }

    span {
        padding-left: 8px;
        border-left: 3px solid #2261F6;
    }
}
</style>
